<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>收获地址管理 | 江宁义务网上商城 - 网购首选 - 正品低价、品质保障、货到付款、配送及时、放心服务、轻松购物！</title>
<meta name="description" content="义务商城-专业的综合网上购物商城，在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等数万个品牌千万种优质商品。便捷、诚信的服务，为您提供愉悦的网上商城购物体验! ">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东商城">
<jsp:include page="../common/include.jsp"></jsp:include>
<script>
	//使弹出的操作层居中显示
	function letDivCenter(divName){   
	    var top = ($(window).height() - $(divName).height())/2;   
	    var left = ($(window).width() - $(divName).width())/2;   
	    var scrollTop = $(document).scrollTop();   
	    var scrollLeft = $(document).scrollLeft(); 
        var screenWidth = document.body.offsetWidth;
        var screenHeight = document.body.offsetHeight;
        $("#bgDiv").css({display:'block','width':screenWidth,'height':screenHeight});
	 $(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();  
	}
	
   	//隐藏弹出的div层
    function hideTheDiv(flag){
    	if(flag == 0){
    		$(".secondDivShow").css("display","none");
    	}else if(flag == 1){
    	}
    	$("#bgDiv").css("display","none");
    }
	
    function showAddDiv(numOfAddr){
		if(numOfAddr >= 10){
			alert("您的可用地址已满，请先删除废弃地址再增加");
			return;
		}
    	letDivCenter(".secondDivShow");
    }
    
    function addNewAddress(){
    	var name = $("input[name='shrname']").val();
    	var addr = $("input[name='addr']").val();
    	var tel = $("input[name='tel']").val();
    	var gdtel = $("input[name='gdtel']").val();
    	var email = $("input[name='email']").val();
    	var youbian = $("input[name='youbian']").val();
    	var flag = 0;
    	if(name==""){
    		$("input[name='shrname']").parent().next().text("请输入收货人姓名");
    		flag++;
    	}else{
    		$("input[name='shrname']").parent().next().html("&nbsp;");
    	}
    	
    	if(addr==""){
    		$("input[name='addr']").parent().next().text("请输入详细地址");
    		flag++;
    	}else{
    		$("input[name='addr']").parent().next().html("&nbsp;");
    	}
    	
    	if(tel==""){
    		$("input[name='tel']").parent().next().text("请输入收货人手机号码");
    		flag++;
    	}else{
    		var regu = "^\\d{11}$";
    		var re = new RegExp(regu);
    		if(!re.test(tel)){
    			$("input[name='tel']").parent().next().text("手机号码格式错误");
    			flag++;
    		}else{
    			$("input[name='tel']").parent().next().html("&nbsp;");
    		}
    	}
    	
    	if(gdtel==""){
    		$("input[name='gdtel']").parent().next().html("&nbsp;");
    	}else{
    		var regu = "^((\\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1})|(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1}))$";
    		var re = new RegExp(regu);
    		if(!re.test(gdtel)){
    			$("input[name='gdtel']").parent().next().text("固定电话格式错误");
    			flag++;
    		}else{
    			$("input[name='gdtel']").parent().next().html("&nbsp;");
    		}
    	}
    	
    	if(email==""){
    		$("input[name='email']").parent().next().text("请输入用户邮箱");
    		flag++;
    	}else{
    		var regu = "^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])";
    		var re = new RegExp(regu);
    		if(!re.test(email)){
    			$("input[name='email']").parent().next().text("邮箱格式输入错误");
    			flag++;
    		}else{
    			$("input[name='email']").parent().next().html("&nbsp;");
    		}
    	}
    	
    	if(youbian == ""){
    		$("input[name='youbian']").parent().next().html("&nbsp;");
    	}else{
    		var regu = "^[1-9][0-9]{5}$";
    		var re = new RegExp(regu);
    		if(!re.test(youbian)){
    			$("input[name='youbian']").parent().next().text("邮编格式错误");
    			flag++;
    		}else{
    			$("input[name='youbian']").parent().next().html("&nbsp;");
    		}
    	}
    	
    	if(flag != 0){
    		return;
    	}
    	
   		$.ajax({
   	   		url : "addNewAddress",
   	   		type : "post",
   	   		data:"name="+name+"&addr="+addr+"&tel="+tel+"&gdtel="+gdtel+"&email="+email+"&youbian="+youbian,
   	   		dataType:"json",
   	   		success : function(data) {
   	   			var bool = data.message;
   	   			if(bool == "true"){
   	   			    window.location.reload(); 
   	   			}else{
   	   				alert("新增地址失败");
   	   			}
   	   		}
   	   	});
    }
    
    function delAddress(adcode){
    	if(confirm("确定删除？")){
	    	$.ajax({
	   	   		url : "delAddress",
	   	   		type : "post",
	   	   		data:"adcode="+adcode,
	   	   		dataType:"json",
	   	   		success : function(data) {
	   	   			var bool = data.message;
	   	   			if(bool == "true"){
	   	   			    window.location.reload(); 
	   	   			}else{
	   	   				alert("删除地址失败");
	   	   			}
	   	   		}
	   	   	});
    	}
    }
    
    
</script>
<!-- mobile setting -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>
.addressModel{
    border:1px solid #dedede;
    margin:10px 5px;
}
.addressHead{border-bottom:1px solid #dedede;height: 25px;padding: 5px 10px;}
.addressHead span{float:left;font-size: 15px;}
.addressHead input[type="button"]{float:right;}

div.secondDivShow{
    position:absolute;
    background:white;
    display:none;
    border:1px solid #eee;
    z-index:10001;
    width: 500px;
}

div.secondDivTitleClass{
	background-color:#FFA105;height: 25px;line-height: 25px;
}
div.addTitClass{float:left;color:#fff;padding: 0 10px;}
div.closeDivClass{
    cursor:pointer;float:right;
    width:22px;height:22px;background-position:-97px -195px;background-image: url("<c:url value='/images/icon.png '/>");
}
div.addTabClass{padding: 10px 0;}
div.addTabClass table tr td{width:200px; height: 28px;line-height: 28px;}
div.addTabClass table tr td.td_r{width:90px; }
div.addTabClass table tr td.but_sub{text-align: center;padding:5px 0;}
div.addTabClass table tr td input[type="text"]{width: 250px;border: 1px solid #dedede;height: 23px;line-height: 23px;padding:0 5px;}
.bgDiv{
   display:none;
   position:absolute;
   top:0;
   background-color:#777;
   filter:Alpha(opacity=30);
   opacity:0.6;
   left:0;
   width:918px;
   height:768px;
   z-index:10000;
}
div.add_tab{padding: 5px 0;}
div.add_tab table tr td{height: 25px;line-height: 25px;}
div.add_tab table tr td.add_td_lef{width: 100px;text-align: right;}


</style>
</head>
<body>
<div class="wrapper">
    <jsp:include page="../common/top.jsp"></jsp:include>
    <div class="section_container">
        <!--Mid Section Starts-->
        <section><div class="section">
			<ul class="breadcrumb">
		      <li>&ouml; &nbsp;&nbsp;<a href="<c:url value="/wlc"/>">首页</a></li>
		      <li><a href="<c:url value="/urc/center"/>">用户中心</a></li>
		      <li class="active"><a href="javascript:">收获地址</a></li>
		    </ul>
        	<div class="list_nav">
        		<!-- people center Left  starts-->
        		<jsp:include page="../common/peo-left.jsp"></jsp:include>
              <!-- people center right  starts-->
              <DIV class="list_nav_right">
              	<div class="list_right_ pro_addr" id="addressList">
	              	<div class="addr_tit">
	                    <span id="mession">&nbsp; 您已有 <b>${size}</b> 个地址，还能添加 <b>${10-size}</b> 个地址</span>
	                    <input type="button" value="新增" onclick="showAddDiv(${size})"/>
	                </div>
                    <c:forEach items="${addresses}" var="address" varStatus="i">
                        <div class="addressModel">
                            <div class="addressHead">
                                <span style="text-align:left;font-weight:bold;">地址${i.count}</span>
                                <input type="button" value="删除" onclick="delAddress(${address.adcode})"/>
                           </div>
                            <div class="add_tab">
                                <table border="0">
                                    <tr><td class="add_td_lef">收 货 人：</td><td>${address.name}</td></tr>
                                    <tr><td class="add_td_lef">详细地址：</td><td>${address.addr}</td></tr>
                                    <tr><td class="add_td_lef">手机号码：</td><td>${address.tel}</td></tr>
                                    <tr><td class="add_td_lef">固定电话：</td><td>${address.gdtel}</td></tr>
                                    <tr><td class="add_td_lef">电子邮箱：</td><td>${address.email}</td></tr>
                                    <tr><td class="add_td_lef">邮政编码：</td><td>${address.youbian}</td></tr>
                                </table>
                            </div>
                        </div>
                    </c:forEach>
	            </div>
              </div>      
               <!-- people center right  ends-->
        	</div>
            <div class="cle">&nbsp;<br></div>
        </div></section>
        <!--Mid Section Ends-->
    </div>
    <div class="footer_container">
        <!--Footer Starts-->
		    <jsp:include page="../common/footer.jsp"></jsp:include>
        <!--Footer Ends-->
    </div>
</div>

<div class="secondDivShow">
    <div class="secondDivTitleClass">
      	<div class="addTitClass"> 新增地址</div>
       <div class="closeDivClass" onclick="hideTheDiv(0)"></div>                           
    </div>
    <div class="addTabClass">
        <table>
            <thead></thead>
            <tr><td class="td_r">收货人<font color="red">*</font>：</td><td><input type="text" value="" name="shrname"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
            <tr><td class="td_r">详细地址<font color="red">*</font>：</td><td><input type="text" value="" name="addr"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
            <tr><td class="td_r">手机号码<font color="red">*</font>：</td><td><input type="text" value="" name="tel"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
            <tr><td class="td_r">固定电话<font color="red">&nbsp;</font>：</td><td><input type="text" value="" name="gdtel"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
            <tr><td class="td_r">电子邮件<font color="red">*</font>：</td><td><input type="text" value="" name="email"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
            <tr><td class="td_r">邮政编码<font color="red">&nbsp;</font>：</td><td><input type="text" value="" name="youbian"/></td><td style="text-align:left;color:red;padding-left:10px">&nbsp;</td></tr>
            <tr><td colspan="2" class="but_sub"><input type="button" value="增加" onclick="addNewAddress()"/></td><td></td></tr>
        </table>
    </div>
</div>
<div id="bgDiv" class="bgDiv"></div>

	<!--CUSTOMIZE-->
<style type="text/css">
.page_selector{ position:absolute; right:0px; top:28%;}
.page_selector a.page_open{ display:inline-block; width:60px; height:12px; background:#252525; color:#fff; text-align:center; font-size:14px; padding:20px 0px; font-weight:bold; text-decoration:none; float:left;}
.page_selector ul{ float:left; background:#f0f0f0; padding:10px 0px; border-top:solid 2px #000; border-bottom:solid 2px #000; display:none;}
.page_selector ul li{ padding:8px 10px; }
.page_selector ul li a{ font-weight:bold; text-decoration:none; color:#000; display:block; padding:2px 5px; text-transform:uppercase; font-size:11px;}

.store_selector{ position:absolute; left:0px; top:28%;}
.store_selector .store_open{display:inline-block; width:128px; height:55px;}
.store_selector div{ float:left; width:157px; height:226px; display:none;}
</style>
</body>
</html>